/**
 * 项目中可复用的文件方法
 */
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
import { ref, onBeforeUnmount, computed } from 'vue'
import dayjs from 'dayjs'

export function useObserbe (apiCallback) {
  // 1.监控
  // 1.要监控的元素 当前组件进去可视区域发起请求获取数据
  const target = ref(null)
  // 2.监控 执行calliabck
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      // 参数1是个数组,结构数组中的
      // console.log(isIntersecting ? '进去' : '走开了')
      if (isIntersecting) {
        // 发送请求,调用方法
        apiCallback()
        // 只发一次
        stop()
      }
    },
    {
      threshold: 0
    }
  )
  return { target }
}

/**
 * 倒计时方法
 * @param {*} time
 */
export function useCountDown (time) {
  const count = ref(0)
  // 计算属性基于现在的countTime秒 =》借助dayjs.unix做一个格式转换处理
  const countText = computed(() => {
    // 完成转换逻辑
    return dayjs.unix(count.value).format('mm分ss秒')
  })

  // pause 停止定时器 resume 开起定时器
  const { pause, resume } = useIntervalFn(() => {
    // 每一秒减一
    count.value--
    // 判断小于等于0停止定时器 pause
    if (count.value <= 0) {
      // pause()是一个方法 停止定时器
      pause()
    }
    // 每一秒执行一次 一开始不执行 immediate: false 默认true
  }, 1000, { immediate: false })
  // 定义开始定时器方法
  function start (tm) {
    if (count.value === 0) {
      // 给倒计时变量 赋值
      count.value = time || tm
    }
    // 开启定时器
    resume()
  }
  onBeforeUnmount(() => {
    pause()
  })
  return { count, start, countText, pause }
}
